<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签属性的修改</title>

    <style>

        .demo {
            width: 100px;
            background-color: red;
        }


    </style>
</head>
<body>

<input type="button" value="点我修改div"
       onclick="changeDiv()">

<input type="button" value="点我修改样式"
       onclick="changeCSS()">

<input type="button" value="移除样式"
       onclick="removeCSS()">

<div id="div1" class="aaa">
    测试
</div>


<script>

    function changeCSS() {

        var div1 = document.getElementById("div1");

        div1.classList.add("demo");
    }

    function removeCSS() {
        var div1 = document.getElementById("div1");

        div1.classList.remove("demo");
    }

    function changeDiv() {
        // 修改属性
        var div1 = document.getElementById("div1");
        // 修改标签的内容
        div1.innerHTML = "修改后的内容";

        // 修改id
        // div1.id = "div2";

        // 修改class
        // 覆盖原有的class值
        // div1.className = "test";
        // 在原有基础上添加新的class值
        div1.classList.add("test");

        // 修改name属性
        // 通用的属性值设置方法
        div1.setAttribute("naskfjsdkfme","aaaaa");

        // 获取标签的某个属性值
        var at = div1.getAttribute("naskfjsdkfme");
        console.log(at);

        // 移除某个属性值
        div1.removeAttribute("naskfjsdkfme");

        // 设置样式
        div1.style.width = "300px";
        div1.style.backgroundColor = "green";


        console.log("测试修改内容");
    }


</script>


</body>
</html>